import { Table, Button, Form } from 'antd'
import { history } from 'umi'
import { useState } from 'react'
import { columns, data, form } from './options'
import styles from './index.less'
import BaseModal from '../../components/baseModal'
import BaseForm from '../../components/baseForm'

export default function ListPage() {
  const [modalVisible, setModalVisible] = useState(false)

  const handleFinish = (values: any) => {
    console.log(JSON.parse(JSON.stringify(values)))
  }
  const handleReset = () => {}
  const handleCancel = () => {
    history.goBack()
  }
  const handleModalCancel = () => {
    setModalVisible(false)
  }
  const handleModalOk = () => {
    setModalVisible(false)
  }
  return (
    <div className={styles['table__wrap']}>
      <BaseForm list={form} onFinish={handleFinish} onReset={handleReset} />
      <div className={styles['table__btns']}>
        <Button
          type="primary"
          onClick={() => {
            setModalVisible(true)
          }}
        >
          新增
        </Button>
        <Button type="primary">删除</Button>
        <Button
          type="primary"
          onClick={() => {
            setModalVisible(true)
          }}
        >
          修改
        </Button>
        <Button type="primary" onClick={handleCancel}>
          返回
        </Button>
      </div>
      <Table columns={columns} dataSource={data} bordered />
      <BaseModal
        onCancel={handleModalCancel}
        onOk={handleModalOk}
        visible={modalVisible}
      />
    </div>
  )
}
